﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<!--强制ie9-->
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" >
	<title>动态监测</title>
	<link type="text/css" rel="stylesheet" th:href="@{/css/all.css}"/>
	<link th:href="@{/css/progress.css}" rel="stylesheet" type="text/css" />

</head>
<body class="body-contrainner fadeInUp">
<!--<div id="tool-bar">
	<button id="btn-search" type="button" class="btn btn-info"><i class="fa fa-search margin-r-5" onclick="start();"></i>查询</button>
</div>-->
<div class="nav-tabs-custom tab-success no-margin">
	<div class="tab-content">
		<div class="tab-pane active" id="tab1" >
			<form id="form-search" class="form-inline has-info" style="padding-bottom: 10px;">
				<button id="btn-search" type="button" class="btn btn-info" onclick="start111();"><i class="fa fa-search margin-r-5"></i>开始</button>
				<button id="btn-export" type="button" class="btn btn-default"><i class="fa fa-download margin-r-5"></i>重载</button>
<!--
				<button id="btn-check" type="button" class="btn btn-default"><i class="fa fa-check-circle margin-r-5"></i>检测</button>
-->
			</form>
		</div>
	</div>
</div>

<div id="input-modal1" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content" style="width:480px; height:700px;">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title text-info">数据检测图</h4>
			</div>
			<div class="modal-body">
				<div id="all" style="display:inline-block;">
					<!--左半部分START-->
					<div id="left">
						<div id="left_head">动态检测项详情</div>
						<div id="left_canvas" style="height:210px;">
							<canvas id="canvas" width="150" height="200"></canvas>
						</div>
						<div id="left_jiancexiang">
							<ul id="jcx_ul"></ul>
						</div>
					</div>
					<!--左半部分END-->
				</div>
			</div>
			<div class="modal-footer">
				<center><button id="btn-cancel-user-role" type="button" class="btn btn-success" data-dismiss="modal">监测完成</button></center>
			</div>
		</div>
	</div>
</div>

<!--
<script type="text/javascript" th:src="@{/js/jquery-3.3.1.js}"></script>
-->

<script language='JavaScript' th:src='@{/plugin/jQuery/jQuery-2.2.0.min.js}'></script>
<script language='javascript' th:src='@{/js/constant.js}'></script>
<script language='JavaScript' th:src='@{/plugin/bootstrap/js/bootstrap.min.js}'></script>
<script type="text/javascript">
    var t;
    var speed = 0; //加载的快慢就靠它了
    // var jcxArray = ${tables};
    var jcxArray = [{name:"1.20In电流冲击测试",time:2000,index:0},
        {name:"2.故障电流误差测试",time:1000,index:1},
        {name:"3.电压准确度测试",time:5000,index:2},
        {name:"4.电流准确度测试",time:5000,index:3},
        {name:"5.功率准确度测试",time:4000,index:4},
        {name:"6.频率基本误差",time:1000,index:5}
    ];
    var total=jcxArray.length;
    //现在正在检测数组中的第几条数据
    var countBefore = 0;
    var canvas = document.getElementById('canvas');  //获取canvas元素
    var context = canvas.getContext('2d');  //获取画图环境，指明为2d
    var centerX = canvas.width/2;   //Canvas中心点x轴坐标
    var  centerY = canvas.height/2;  //Canvas中心点y轴坐标
    var  rad = Math.PI*2/100;//将360度分成100份，那么每一份就是rad度
    function bb(){
        // 绘图
        context.clearRect(0, 0, canvas.width, canvas.height);
        whiteCircle(speed);
        text(speed);
        blueCircle(speed);
    }

    //绘制蓝色外圈
    function blueCircle(n){
        context.save();
        if(n<60){
            context.strokeStyle = "#FFC072"; //设置描边样式
        }else{
            context.strokeStyle = "#37DD7B"; //设置描边样式
        }
        context.lineWidth = 2; //设置线宽
        context.beginPath(); //路径开始
        context.arc(centerX, centerY, 63 , -Math.PI/2, -Math.PI/2 +n*rad, false); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
        context.stroke(); //绘制
        context.closePath(); //路径结束
        context.restore();
    }
    //绘制白色外圈
    function whiteCircle(n){
        context.save();
        context.beginPath();
        if(n<60){
            context.fillStyle = "#FFBE71";
        }else{
            context.fillStyle = "#5EEB7E";
        }
        context.arc(centerX, centerY, 60 , 0, Math.PI*2, false);
        context.fill();
        context.closePath();
        context.restore();
    }
    //百分比文字绘制
    function text(n){
        context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
        context.strokeStyle = "#fff"; //设置描边样式
        context.font = "35px Arial"; //设置字体大小和字体
        context.fillStyle="white";
        //绘制字体，并且指定位置
        if(n==100){
            context.fillText(n+"%", centerX-45, centerY+12);
        }else{
            context.fillText(n+"%", centerX-25, centerY+12);
        }
        context.stroke(); //执行绘制
        context.restore();
    }

    // 加载数据
    function addData(){
        // 左侧检测项加载
        if(countBefore<total-1){
            //从后台获取的正在检测表名数组的第几条数据
            var countNow=getCount();
            flash(countBefore,countNow);
            countBefore=countNow;
        }else if(countBefore=total-1){

            var index = jcxArray[countBefore].index;
            $("#"+index).text('已完成');
            $("#"+index).css('color','#4AAB02');
            $("."+index).attr('src','img/dh.png');
            // 滚动条置底
            document.getElementById("left_jiancexiang").scrollTop = document.getElementById("left_jiancexiang").scrollHeight;
            speed=100;
            bb();
            // count++;
            clearInterval(t);
        }
    };


    function getCount(){
        //    var c=countBefore;
        //    var temp="${sessionScope.count_flag}";
        //    if(temp==""){
        //  	   temp=c
        //     }
        //   console.log(temp);
        //   return  parseInt(temp);
        //+parseInt(Math.random()*3)
		var c=countBefore+parseInt(Math.random()*3);
		if(c>=total-1){
		    c=total-1
		}
        return c
    };


    function flash(countBefore,countNow){
        for(var i=1;i<=countNow-countBefore;i++){
            $("#jcx_ul").append("<li style='height:30px;line-height:30px;text-align:left;'><span style='float:left;width:220px;font-size:12px;color:#363a5c;'>" + jcxArray[countBefore+i].name + "</span><span id="+ jcxArray[countBefore+i].index +" style='float:left;width:50px;margin-left:40px;padding-left:10px;font-size:12px;color:#363a5c;'></span><img class='"+jcxArray[countBefore+i].index+"' src='../img/fdj.png' style='float:left;'/></li>");
            $("#"+jcxArray[countBefore+i].index).text('检测中');
            $("#"+jcxArray[countBefore+i].index).css('color','red');
            var index = jcxArray[countBefore+i].index-1;
            $("#"+index).text('已完成');
            $("#"+index).css('color','#4AAB02');
            $("."+index).attr('src','../img/dh.png');
            // 滚动条置底
            document.getElementById("left_jiancexiang").scrollTop = document.getElementById("left_jiancexiang").scrollHeight;

            speed=parseInt((countNow/(total))*100);
            if(speed>100){
                speed=100;
            }
            bb();
        }
    };

    function start111() {
         $("#input-modal1").modal("show");
        //$("#left_jiancexiang").nextAll().remove();
        $("ul li").remove();
      //  $("#input-modal1").modal("show");
        speed = 0; //加载的快慢就靠它了
        // 循环执行次数
        countBefore = 0; // 加载检测项
        // var total=jcxArray.length;
        var dwHeight = new Array();
        bb();
        // 定时器
        $("#jcx_ul").append("<li style='height:30px;line-height:30px;text-align:left;'><span style='float:left;width:220px;font-size:12px;color:#363a5c;'>" + jcxArray[0].name + "</span><span id="+ jcxArray[0].index +" style='float:left;width:50px;margin-left:40px;padding-left:10px;font-size:12px;color:#363a5c;'></span><img class='"+jcxArray[0].index+"' src='../img/fdj.png' style='float:left;'/></li>");
        $("#"+jcxArray[0].index).text('检测中');
        $("#"+jcxArray[0].index).css('color','red');
        t= setInterval("addData()",1000);
    }
</script>

</body>
</html>
